
<template>
  <div id="currency">
    <h1>下面这个按钮的点击次数{{COUNTER}}</h1>
    <button v-on:click="counter()">点击</button>
    <button v-on:click="say('what')">say 'what'</button>
    <button v-on:click="event('Hello',$event)">访问原生DOM事件</button>
    <article>
      <header>测试事件的修饰符</header>
      <div layer=1 @click="changeColor($event)">
        <button @click="changeColor($event)">点(click)</button>
        <button @click.stop="changeColor($event)">点(click.stop)</button>
      </div>
    </article>
    <article>
      <header>表单测试 </header>
      <input v-model="username" placeholder="username">
      <button @click="addTo()">增加到checkbox</button>
      <div v-for="(value,index) in checkedNames" v-bind:key="'0'+index">
        <input type="checkbox" :value="value" v-model="checkedNames">
        <label :for="value">{{value}}</label>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "X-v",
  data() {
    return {
      COUNTER: 1,
      username: "张三",
      checkedNames: ["吃饭"]
    }
  },

  methods: {
    addTo() {
      this.checkedNames.push(this.username);
      this.username = ""
    },

    counter() {
      this.COUNTER++;
    },

    say(messaGE) {
      console.info(messaGE);
    },

    event(msg, event) {
      console.info(msg, event.target.tagName)
    },

    changeColor(event) {
      let element = event.currentTarget;
      element.style.backgroundColor = "rgba(255, 0, 0, 0.25)";
      setTimeout(function () {
        element.style.backgroundColor = "";
        //  debugger;
      }, 1000);
    }
  }
}
</script>

<style>
#currency {
  background-color: rgba(255, 0, 0, 0.25)
}
</style>
